<template>
  <div class="md-example-child md-example-child-cashier">
    <md-field title="支付结果">
      <md-radio-list v-model="cashierResult" :options="cashierResults" />
    </md-field>
    <md-field title="支付配置">
      <md-input-item
        title="支付金额"
        align="right"
        type="money"
        v-model="cashierAmount"
      >
      </md-input-item>
      <md-field-item title="发送验证码" align="right">
        <md-switch v-model="isCashierCaptcha"></md-switch>
      </md-field-item>
    </md-field>
    <md-button @click="isCashierhow = !isCashierhow">{{
      isCashierhow ? "收起收银台" : "唤起收银台"
    }}</md-button>
    <md-cashier
      ref="cashier"
      v-model="isCashierhow"
      :channels="cashierChannels"
      :channel-limit="2"
      :payment-amount="cashierAmount"
      payment-describe="关于支付金额的特殊说明"
      large-radius
      @select="onCashierSelect"
      @pay="onCashierPay"
      @cancel="onCashierCancel"
    ></md-cashier>
  </div>
</template>

<script>
import {
  Button,
  RadioList,
  Field,
  FieldItem,
  InputItem,
  Switch,
  Cashier,
  Toast,
} from "mand-mobile";

export default {
  name: "cashier-demo",
  components: {
    [Button.name]: Button,
    [RadioList.name]: RadioList,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [Switch.name]: Switch,
    [Cashier.name]: Cashier,
  },
  data() {
    return {
      isCashierhow: false,
      isCashierCaptcha: false,
      cashierAmount: "100.00",
      cashierResult: "success",
      cashierResults: [
        {
          text: "支付成功",
          value: "success",
        },
        {
          text: "支付失败",
          value: "fail",
        },
      ],
      cashierChannels: [
        {
          icon: "cashier-icon-1",
          text: "招商银行(0056)",
          value: "001",
        },
        {
          icon: "cashier-icon-2",
          text: "支付宝支付",
          value: "002",
        },
        {
          icon: "cashier-icon-3",
          text: "微信支付",
          value: "003",
        },
        {
          icon: "cashier-icon-4",
          text: "QQ钱包支付",
          value: "004",
        },
        {
          icon: "cashier-icon-5",
          text: "一网通支付",
          value: "005",
        },
      ],
    };
  },
  computed: {
    cashier() {
      return this.$refs.cashier;
    },
  },
  methods: {
    doPay() {
      if (this.isCashierCaptcha) {
        this.cashier.next("captcha", {
          text: "Verification code sent to 156 **** 8965",
          brief: "The latest verification code is still valid",
          autoCountdown: false,
          countNormalText: "Send Verification code",
          countActiveText: "Retransmission after {$1}s",
          onSend: (countdown) => {
            console.log("[Mand Mobile] Send Captcha");
            this.sendCaptcha().then(() => {
              countdown();
            });
          },
          onSubmit: (code) => {
            console.log(`[Mand Mobile] Send Submit ${code}`);
            this.checkCaptcha(code).then((res) => {
              if (res) {
                this.createPay().then(() => {
                  this.cashier.next(this.cashierResult);
                });
              }
            });
          },
        });
      } else {
        this.createPay().then(() => {
          this.cashier.next(this.cashierResult, {
            buttonText: "好的",
            handler: () => {
              this.isCashierhow = false;
              Toast.info(`${this.cashierResult}点击`);
            },
          });
        });
      }
    },
    // Create a pay request & check pay result
    createPay() {
      this.cashier.next("loading");
      return new Promise((resolve) => {
        this.timer = setTimeout(() => {
          resolve();
        }, 3000);
      });
    },
    // Create a captcha sending request
    sendCaptcha() {
      return new Promise((resolve) => {
        this.timer = setTimeout(() => {
          resolve();
        }, 200);
      });
    },
    // Create a captcha checking request
    checkCaptcha(code) {
      return new Promise((resolve) => {
        this.timer = setTimeout(() => {
          resolve(!!code);
        }, 200);
      });
    },
    onCashierSelect(item) {
      console.log(`[Mand Mobile] Select ${JSON.stringify(item)}`);
    },
    onCashierPay(item) {
      console.log(`[Mand Mobile] Pay ${JSON.stringify(item)}`);
      this.doPay();
    },
    onCashierCancel() {
      // Abort pay request or checking request
      this.timer && clearTimeout(this.timer);
    },
  },
};
</script>

<style lang="stylus">
.md-example-child-cashier
  .md-field
    margin-bottom 30px
  .md-cashier-channel-item
    .item-icon.cashier-icon-1
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-2
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-3
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-4
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-5
      background url('') center no-repeat
      background-size 26px
</style>
